<template>
  <div class="userMenu">
    <ul>
      <li :class="{'active':active ==='1'}">
        <router-link to="/balance">我的余额</router-link>
      </li>
      <li :class="{'active':active ==='2'}">
        <router-link to="/vip">成为vip</router-link>
      </li>
      <li :class="{'active':active ==='3'}">
        <router-link to="/order">我的订单</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    active: String
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="scss">
.userMenu {
  width: 172px;
  float: left;
  padding-top: 50px;
  li {
    height: 48px;
    width: 160px;
    margin: 0 auto 8px;
    a {
      position: relative;
      display: block;
      height: 48px;
      font-size: 16px;
      line-height: 48px;
      color: #787d82;
      padding-left: 46px;
      text-align: left;
    }
    &.active {
      background: rgba(240, 20, 20, 0.8);
      border-radius: 8px 0 0 8px;
      a {
        color: #fff;
      }
      a:after {
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 24px solid #fff;
        border-bottom: 24px solid #fff;
        border-left: 15px solid transparent;
      }
    }
  }
}
</style>
